<template>
	<view class="jk-page-container bg">
		<jkSearchBar
            :search-val.sync="searchParams.productNameOrCode"
            :searchLeftItemName="searchParams.belongDate"
            search-left-item-no-data-name="日期"
            search-right-item-no-data-name="筛选更多"
            placeholder="品种编号或名称"
            @search="onSearchBtn"
            @search-left-item="showSelectDatePicker = true"
			@search-right-item="moreSearchState = true"
        ></jkSearchBar>
		<view class="column-list-container" style="padding-bottom: 84px;box-sizing: border-box;">
			<view v-for="(item) in tableData" :key="item.id" class="column-list-item">
                <view @click="onJump(item.id)">
                    <view class="column-list-item-default flex-between-center">
                        <view class="column-list-item-title">{{ item.code || '' }}</view>
                        <view class="column-list-item-sub-title color1"><u-tag :text="item.auditState ? '已审核' : '待审核'" plain size="mini" :type="item.auditState ? 'success' : 'error'"></u-tag></view>
                    </view>
                    <view class="column-list-item-default column-list-item-sub-title">仓库：{{ item.warehouseName || '' }}</view>
                    <view class="column-list-item-default column-list-item-sub-title">数量：{{ item.totalOutInNumber || '' }}</view>
                    <view class="column-list-item-default column-list-item-sub-title flex-between-center">
                        <view>人员：{{ item.empName || '' }}</view>
                        <view>时间：{{ item.belongDateTime || '' }}</view>
                    </view>
                </view>
				<!--<view style="font-weight: 300;margin-top: 20rpx;">
					<u-button @click="onToggleStateBtn(item)" type="text" size="normal">{{ item.auditState ? '停用' : '启用' }}</u-button>
				</view>-->
			</view>
			<jk-no-more :pageNo="searchParams.pageNo" :show="isNoMore" />
            <view style="width: 100%;position: fixed;left: 0;bottom: 0;height: 84px;background: #fff;display: flex;justify-content: center;align-items: center;padding: 0 32rpx;box-sizing: border-box;border-top: solid 1px #dcdee2;">
                <u-button @click="onJump" type="primary" style="width: 100%;" size="large" icon="scan">扫码入库</u-button>
            </view>
		</view>
        <jkPopupOption
            :value="searchParams.workshopId"
            :show="selectWorkshopPopupOptionState"
            :optionList="workshopList"
            @visible-change="(e) => selectWorkshopPopupOptionState = e"
            @confirm="onConfirmOfSelectWorkshop"
        ></jkPopupOption>
        <jkPopupOption
            :value="searchParams.processCode"
            :show="selectProcessPopupOptionState"
            :optionList="processList"
            :option-id-key-name="'code'"
            @visible-change="(e) => selectProcessPopupOptionState = e"
            @confirm="onConfirmOfSelectProcess"
        ></jkPopupOption>
        <u-datetime-picker
            :show="showSelectDatePicker"
            v-model="initTimeVal"
            :closeOnClickOverlay="true"
            mode="date"
            cancelText="清空"
            @confirm="onConfirmOfSelectDatePicker"
            @close="showSelectDatePicker = false"
            @cancel="onClearOfSelectDatePicker"
        ></u-datetime-picker>
        <more-search
            :popup-state="moreSearchState"
            @close="(e) => moreSearchState = e"
            @confirm="onConfirmOfMoreSearch"
        ></more-search>
	</view>
</template>

<script>
    import {
        productionStockRecordPage, productionStockRecordUpdateAuditState,
        spinProcessPage,
    } from "../../../../api";
    import {
        formatDate,
        isLastPage,
        pageConfig,
        showLoading
    } from "../../../../utils/jk-utils";
	import loadingMore from '../../../../mixins/loading-more';
	import jkNoMore from "../../../../jk-components/jk-no-more";
	import jkSearchBar from "../../../../jk-components/jk-search-bar";
    import jkPopupOption from "../../../../jk-components/jk-popup-option";
    import moreSearch from './components/moreSearch';
    export default {
		mixins: [loadingMore],
		components: {
            moreSearch,
            jkPopupOption,
            jkNoMore,
			jkSearchBar,
		},
		data() {
			return {
				apiConfig: {
					list: productionStockRecordPage
				},
                moreSearchState: false,
				searchParams: {
					pageNo: 1,
					pageSize: pageConfig.pageSize,
					totalCount: pageConfig.totalCount,
					productNameOrCode: '',
                    code: '',
                    workshopId: '',
					workshopName: '',
				},
                initTimeVal: '',
                selectWorkshopPopupOptionState: false,
                selectProcessPopupOptionState: false,
				tableData: [],
				workshopList: [],
				processList: [],
                showSelectDatePicker: false
			}
		},
		onLoad(e) {
            this.initTimeVal = Date.now();
            // this.$set(this.searchParams, 'type', e.state);
        },
		onShow() {
            if (!this.searchParams.workshopId) {
                // this.$set(this.searchParams, 'workshopId', getApp().globalData.defaultWorkshop.id);
                // this.$set(this.searchParams, 'workshopName', getApp().globalData.defaultWorkshop.name);
            }
            this.workshopList = getApp().globalData.defaultWorkshop.list;
            this.processList = getApp().globalData.defaultProcess.list;
            this.getDependentData();
        },
		methods: {
            onConfirmOfMoreSearch(item) {
                this.searchParams = {
                    ...this.searchParams,
                    ...item
                };
                this.moreSearchState = false;
                this.$set(this.searchParams, 'pageNo', 1);
                this.getListRequest();
            },
            onToggleStateBtn(item) {
                let _this = this;
                uni.showModal({
                    title: '提示',
                    content: `确定${item.auditState ? '停用' : '启用'}吗？`,
                    success(res) {
                        if (res.confirm) {
                            productionStockRecordUpdateAuditState({id: item.id}).then(res => {
                                if (res.data.status === 200) {
                                    _this.getListRequest();
                                }
                            });
                        }
                    }
                });
            },
            onClearOfSelectDatePicker() {
                this.$set(this.searchParams, 'belongDate', '');
                this.showSelectDatePicker = false;
                this.getListRequest();
            },
            onConfirmOfSelectDatePicker(e) {
                this.$set(this.searchParams, 'belongDate', formatDate(e.value));
                this.showSelectDatePicker = false;
                this.getListRequest();
            },
            onConfirmOfSelectProcess(e, item) {
                this.$set(this.searchParams, 'pageNo', 1);
                this.$set(this.searchParams, 'processCode', item.code);
                this.$set(this.searchParams, 'processName', item.name);
                this.selectProcessPopupOptionState = false;
                this.getListRequest();
            },
            onConfirmOfSelectWorkshop(e, item) {
                this.$set(this.searchParams, 'pageNo', 1);
                this.$set(this.searchParams, 'workshopId', item.id);
                this.$set(this.searchParams, 'workshopName', item.name);
                this.selectWorkshopPopupOptionState = false;
                this.getListRequest();
            },
			onClearOfSearchIpt() {
				this.$set(this.searchParams, 'productNameOrCode', '');
				this.onSearchBtn();
			},
			onJump(id) {
                let url = '/pages/production/packagePrd/inWarehouse/toInput';
                if (id) {
                    url+=`?id=${id}`;
                }
                uni.navigateTo({
                    url: url
                })
			},
			onSearchBtn(e) {
				this.tableData = [];
				this.$set(this.searchParams, 'productNameOrCode', e);
				this.getListRequest();
			},
			getProcessListRequest() {
				return spinProcessPage({
					auditState: 1
				}).then(res => {
					if (res.data.status === 200) {
						let item = res.data.res.find(x => x.code.toUpperCase() === 'XS');
						if (item) {
							this.$set(this.searchParams, 'processCode', item.code);
							this.$set(this.searchParams, 'processName', item.name);
						}
						this.processList = res.data.res;
					}
				});
			},
			async getDependentData() {
				showLoading(true);
				this.searchParams.pageNo = 1;
				await this.getListRequest();
				showLoading(false);
			},
			getListRequest() {
				// if (this.searchParams.workshopId) {
					showLoading(true);
                    this.searchParams.pageNo = 1;
                    let params = JSON.parse(JSON.stringify(this.searchParams));
                    delete params.workshopName;
                    delete params.workshopCode;
                    delete params.processName;
                    delete params.totalCount;
					return this.apiConfig.list(params).then(res => {
						showLoading(false);
						if (res.data.status === 200) {
							this.$set(this.searchParams, 'totalCount', res.data.count);
							this.tableData = res.data.res;
							this.isNoMore = isLastPage(this.searchParams.totalCount, this.searchParams.pageSize, this.searchParams.pageNo);
						}
					})
				// }
			}
		},
		onReachBottom() {
			this.getMore();
		}
	}
</script>

<style lang="scss" scoped>
</style>
